<template>
    <view class="main big pb-80">
        <view class="bg big">
            <hj-image mode="aspectFill" src="home-bg.jpg" width="100%" height="100%" />
        </view>
        <view class="main-in">
            <view class="main-top pt-40 pl-80 t-w">
                <view class="main-top-name ft-24 mb-4">汇杰(长沙)一千米低空飞行服务有限公司</view>
                <view class="FZGongYeHei main-top-title">招生信息平台</view>
                <view class="logo"
                    ><hj-image src="drone-04.svg" width="110rpx" height="110rpx"
                /></view>
            </view>
            <view class="pl-50 pr-50">
                <view class="pl-100 pr-100 FZGongYeHei t-w ft-40">
                    <view
                        :class="{ dh: count === 0 }"
                        class="mt-60 center home-but"
                        @click="handleAbout"
                    >
                        关于我们
                    </view>
                    <hj-login @click="handleSignUp" @init="handleSignUp">
                        <view :class="{ dh: count === 1 }" class="mt-46 center home-but">
                            {{ false ? '立即报名' : '学员中心' }}
                        </view>
                    </hj-login>
                    <hj-login @click="handleRecom" @init="handleRecom">
                        <view :class="{ dh: count === 2 }" class="mt-46 center home-but">
                            我要推荐
                        </view>
                    </hj-login>
                    <view
                        :class="{ dh: count === 3 }"
                        class="mt-46 center home-but"
                        @click="handleDiscount"
                    >
                        优惠政策
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 首页主要内容按钮区域组件
 * @author yinzhi
 * @date 2025-03-07
 */
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { throttle } from '@/uni_modules/uview-plus'
import { ref, defineComponent } from 'vue'
defineComponent({
    name: 'MainTop'
})

// 关于我们
const handleAbout = () => {
    uni.navigateTo({
        url: '/pages/base/about/index'
    })
}

/**
 * @description 根据不同状态跳转不同页面
 */
const handleSignUp = () => {
    const paht = {
        0: '/pages/base/data-entry/index', // 录入信息
        1: '/pages/marketing/questionnaire/index', // 问卷调查
        2: '/pages/marketing/questionnaire-end/index', // 问卷调查结束页面
        3: '/pages/student/student-center/index' // 学员中心
    }
    uni.navigateTo({
        url: paht[3]
    })
}

/**
 * @description 推荐(推广页面)
 */
const handleRecom = () => {
    uni.navigateTo({
        url: '/pages/marketing/spread/index'
    })
}

// 优惠政策
const handleDiscount = e => {
    throttle(() => {
        uni.showToast({
            title: '即将推出，敬请期待！',
            duration: 2000,
            icon: 'none'
        })
    }, 3000)
}

// 按钮放大动画交互
const count = ref(0)
const timer = ref(null)
onLoad(() => {
    interval()
})
const interval = () => {
    timer.value = setTimeout(() => {
        if (count.value < 3) {
            count.value++
        } else {
            count.value = 0
        }
        interval()
    }, 2000)
}
onUnload(() => {
    clearTimeout(timer.value)
})
</script>

<style scoped lang="scss">
.home-but {
    background: #608196;
    border: 4rpx solid $uni-text-color-inverse;
    border-radius: 16rpx;
    height: 84rpx;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
    color: $uni-text-color-inverse;
}
.home-but.dh {
    animation: zoom 2s;
}
@keyframes zoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}
.main {
    position: relative;
    &-in {
        position: relative;
        z-index: 10;
    }
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0.6;
    }
    &-top {
        position: relative;
        .logo {
            position: absolute;
            right: 80rpx;
            bottom: 0;
        }
        &-title {
            font-size: 68rpx;
            text-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px;
        }
        &-name {
            text-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px;
        }
    }
}
</style>
